import React, { useState } from "react";
import { QuestionOutlined } from "@ant-design/icons";
import style from "./msg.module.css";
import { useNavigate } from "react-router-dom";

function Message() {
  const [showMsBox, setShowMsBox] = useState(false);
  const [currentPage, setCurrentPage] = useState("help");
  const handleQuestionIconCLick = () => {
    setShowMsBox(!showMsBox);
  };
  const handleArrowClick = (page) => {
    setCurrentPage(page);
  };
  const goBack=()=>{
    setCurrentPage('help')
  }
  return (
    <div>
      <QuestionOutlined
        style={{ fontSize: 30, marginLeft: 1100, marginBottom: 10 }}
        onClick={handleQuestionIconCLick}
      />
      {showMsBox && (
        <div className={style.ms}>
          {currentPage === "help" && (
            <>
              <div className={style.help}>帮助中心</div>
              <p>
                常见问题
                <span onClick={() => handleArrowClick("commonQuestions")}>
                  &gt;
                </span>
              </p>
              <p>
                快捷键
                <span onClick={() => handleArrowClick("shortcuts")}>&gt;</span>
              </p>
              <p>
                提个建议
                <span onClick={() => handleArrowClick("suggestions")}>
                  &gt;
                </span>
              </p>
              <p>
                在线客服
                <span onClick={() => handleArrowClick("customerService")}>
                  &gt;
                </span>
              </p>
            </>
          )}
          {currentPage === "commonQuestions" && (
            <div>
              <h3 onClick={goBack}>&lt;常见问题页面</h3>
              <p>如何编辑文字?</p>
              <p>如何编辑图片?</p>
              <p>如何上传图片?</p>
              <p>如何添加背景?</p>
              <p>如何锁定/解锁素材?</p>
            </div>
          )}
          {currentPage === "shortcuts" && (
            <div>
              <h3 onClick={goBack}>&lt;快捷键页面问题</h3>
            </div>
          )}
          {currentPage === "suggestions" && (
            <div>
              <h3 onClick={goBack}>&lt;提个建议页面内容</h3>
            </div>
          )}
          {currentPage === "customerService" && (
            <div>
              <h3 onClick={goBack}>&lt;在线客服页面内容</h3>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default Message;
